<template>
  <div>
    <canvas-comp @canvasCompButton="canvasCompButton" :ifTopButtonShow="ifTopButtonShow" :ifTopTitleColor="ifTopTitleColor"/>
    <transition name="containerTranslate">
      <!-- welcome 功能弹窗 -->
      <div class="welcome-container" ref="welcomeCont" v-show="ifWelcomeBgShow">
        <div class="welcome-container-main">
          <img class="welcome-text" src="../../../assets/images/welcome_img.png">
          <img class="welcome-text2" src="../../../assets/images/welcome_img2.png">
          <img class="welcome-text3" src="../../../assets/images/welcome_img3.png">
          <img class="welcome-text4" src="../../../assets/images/welcome_img4.png">
        </div>
        <div class="welcome-container-center">
          <transition name="containerTranslate">
            <div class="next" v-show="ifCloseShow" @click="closeButton()">CLOSE</div>
          </transition>
        </div>
      </div>
    </transition>
    <div class="welcome-bg" ref="welcomeBg" v-show="ifWelcomeBgShow"></div>

    <transition name="containerTranslate">
      <!-- about 功能弹窗 -->
      <div class="about-container" ref="aboutCont" v-show="ifAboutBgShow">
        <div class="about-container-main">
          <img class="main-title" :src="mainTitle">
          <img class="main-title2" :src="mainTitle2">
          <img class="main-text" :src="mainText">
        </div>
        <div class="about-container-center">
          <transition name="containerTranslate">
            <div class="last" v-show="ifLastShow" @click="lastButton()">{{ lastText }}</div>
          </transition>
          <transition name="containerTranslate">
            <div class="next" v-show="ifNextShow" @click="nextButton()">{{ nextText }}</div>
          </transition>
        </div>
      </div>
    </transition>
    <div class="about-bg" ref="aboutBg" v-show="ifAboutBgShow"></div>
    <canvas id="three" ref="three" />
  </div>
</template>

<script>
import canvasComp from '../canvas_comp/canvas_comp.vue'

import CanvasObject from './js/main'

import title1 from '../../../assets/images/title1.png'
import title2 from '../../../assets/images/title2.png'
import text1 from '../../../assets/images/text1.png'
import title3 from '../../../assets/images/title3.png'
import title4 from '../../../assets/images/title4.png'
import text2 from '../../../assets/images/text2.png'
import title5 from '../../../assets/images/title5.png'
import title6 from '../../../assets/images/title6.png'
import text3 from '../../../assets/images/text3.png'

export default {
  components: {
    canvasComp,
  },
  data() {
    return {
      canvasObject: {},
      ifTopButtonShow: true, // 右上角按钮是否显示
      ifTopTitleColor: false, // 左上角标题颜色
      ifWelcomeBgShow: false, // 背景是否变暗，以及 welcome-container 是否显示
      ifCloseShow: false, // welcome 弹出框按钮
      ifAboutBgShow: false, // 背景是否变暗，以及 about-container 是否显示
      ifLastShow: false, // about 弹出框按钮
      ifNextShow: false, // about 弹出框按钮
      lastText: 'LAST',
      nextText: 'NEXT',
      mainTitle: title1,
      mainTitle2: title2,
      mainText: text1,
      aboutPageIndex: 1 // 判断当前页数
    }
  },
  mounted() {
    // 首屏渲染完，让 welcome 自动弹出
    this.ifWelcomeBgShow = true;
    this.ifCloseShow = true;
    this.ifTopButtonShow = false; // 右上角按钮隐藏

    // 初始化获取 $refs
    let w_height = window.innerHeight < 720 ? 720 : window.innerHeight;
    this.$refs.aboutBg.style.height = w_height + "px"; // 让 aboutBg 高度自适应
    this.$refs.welcomeBg.style.height = w_height + "px"; // 让 welcomeBg 高度自适应
    this.$refs.three.style.height = w_height + "px"; // 让 canvas 高度自适应
    this.$refs.aboutCont.style.marginTop = (w_height - 700) / 2 + "px";
    this.$refs.welcomeCont.style.marginTop = (w_height - 700) / 2 + "px";

    // 导入 main.js 中的 CanvasObject 类，并实例化
    this.canvasObject = new CanvasObject();
    this.canvasObject.initThree();
    this.canvasObject.controls.maxPolarAngle = 1.5;
  },
  methods: {
    canvasCompButton(value) {
      let canvasObj = this.canvasObject;
      // 0 是否开启 - 摄像机自动旋转
      // 1 是否允许 - 用户缩放
      // about 按钮
      if(value == 0) {
        canvasObj.controls.autoRotate = !canvasObj.controls.autoRotate;
      } else if(value == 1) {
        canvasObj.controls.enableZoom = !canvasObj.controls.enableZoom;
      } else if(value == 'welcome') {
        this.ifTopButtonShow = false; // 右上角按钮隐藏
        this.ifWelcomeBgShow = true; // 背景变暗
        this.ifTopTitleColor = true; // title 颜色变换
        setTimeout(() => this.ifCloseShow = true, 100);
      } else if(value == 'mimu') {
        alert('ABOUT 已开发完成，MIMU 正在开发中...');
      } else if(value == 'about') {
        canvasObj.changeCameraPositon(); // 导入 main.js 里的帧动画
        this.aboutFunction(); // 触发 ABOUT 功能
      }
    },
    /**
     * 开始帧动画，并隐藏右上角按钮
     */
    aboutFunction() {
      let canvasObj = this.canvasObject;
      this.ifTopButtonShow = false;
      canvasObj.controls.autoRotate = false; // 开始之前先停止自动旋转
      this.mainTitle = title1;
      this.mainTitle2 = title2;
      this.mainText = text1;
      setTimeout(() => {
        this.ifAboutBgShow = true; // 背景变暗
        this.ifTopTitleColor = true; // title 颜色变换
        canvasObj.actionCamera.timeScale = 0;
        canvasObj.actionControls.timeScale = 0;
        canvasObj.controls.autoRotate = true; // 开始旋转
        setTimeout(() => this.ifNextShow = true, 100);
      }, 2000);
    },
    lastButton() {
      this.aboutPageIndex--;
      if(this.aboutPageIndex == 2) setTimeout(() => this.nextText = "NEXT", 200);
      this.ifLastShow = false;
      this.ifNextShow = false;
      let canvasObj = this.canvasObject;
      this.ifAboutBgShow = false; // 背景变亮
      this.ifTopTitleColor = false; // title 颜色变换
      canvasObj.controls.autoRotate = false; // 停止旋转
      canvasObj.actionCamera.timeScale = -1;
      canvasObj.actionControls.timeScale = -1;
      setTimeout(() => {
        if(this.aboutPageIndex == 1) {
          this.mainTitle = title1;
          this.mainTitle2 = title2;
          this.mainText = text1;
        } else if(this.aboutPageIndex == 2) {
          this.mainTitle = title3;
          this.mainTitle2 = title4;
          this.mainText = text2;
        } else if(this.aboutPageIndex == 3) {
          this.mainTitle = title5;
          this.mainTitle2 = title6;
          this.mainText = text3;
        }
        this.ifAboutBgShow = true; // 背景变暗
        this.ifTopTitleColor = true; // title 颜色变换
        canvasObj.controls.autoRotate = true; // 开始旋转
        canvasObj.actionCamera.timeScale = 0;
        canvasObj.actionControls.timeScale = 0;
        if(this.aboutPageIndex == 1) {
          setTimeout(() => this.ifNextShow = true, 100);
        } else {
          setTimeout(() => this.ifLastShow = true, 100);
          setTimeout(() => this.ifNextShow = true, 200);
        }
      }, 2000)
      
    },
    nextButton() {
      this.aboutPageIndex++;
      let canvasObj = this.canvasObject;
      if(this.aboutPageIndex == 3) setTimeout(() => this.nextText = "RETURN", 200);
      if(this.aboutPageIndex == 4) {
        this.ifNextShow = false;
        this.ifLastShow = false;
        this.ifAboutBgShow = false; // 背景变亮
        this.ifTopTitleColor = false; // title 颜色变换
        canvasObj.controls.autoRotate = false; // 停止旋转
        // 动画开始
        canvasObj.actionCamera.timeScale = 1;
        canvasObj.actionControls.timeScale = 1;
        this.ifTopButtonShow = true;
        this.aboutPageIndex = 1;
        setTimeout(() => this.nextText = "NEXT", 200);
      } else {
        this.ifNextShow = false;
        this.ifLastShow = false;
        this.ifAboutBgShow = false; // 背景变亮
        this.ifTopTitleColor = false; // title 颜色变换
        canvasObj.controls.autoRotate = false; // 停止旋转
        // 动画开始
        canvasObj.actionCamera.timeScale = 1;
        canvasObj.actionControls.timeScale = 1;
        setTimeout(() => {
          if(this.aboutPageIndex == 1) {
            this.mainTitle = title1;
            this.mainTitle2 = title2;
            this.mainText = text1;
          } else if(this.aboutPageIndex == 2) {
            this.mainTitle = title3;
            this.mainTitle2 = title4;
            this.mainText = text2;
          } else if(this.aboutPageIndex == 3) {
            this.mainTitle = title5;
            this.mainTitle2 = title6;
            this.mainText = text3;
          }
          this.ifAboutBgShow = true; // 背景变暗
          this.ifTopTitleColor = true; // title 颜色变换
          canvasObj.controls.autoRotate = true;
          canvasObj.actionCamera.timeScale = 0;
          canvasObj.actionControls.timeScale = 0;
          setTimeout(() => this.ifNextShow = true, 100);
          setTimeout(() => this.ifLastShow = true, 200);
        }, 2000)
      }
    },
    /**
     * welcome 弹窗框关闭按钮
     */
    closeButton() {
      this.ifCloseShow = false;
      this.ifWelcomeBgShow = false; // 背景变亮
      this.ifTopTitleColor = false; // title 颜色变换
      this.ifTopButtonShow = true;
    }
  }
}
</script>

<style scoped>
  #three {
    width: 100%;
    height: 1080px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -2;
  }

  .welcome-container, .about-container {
    width: 900px;
    height: 600px;
    border: 1px solid transparent;
    border-radius: 16px;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    caret-color: transparent; /* 去除光标颜色 */
  }

  .containerTranslate-enter-active, .containerTranslate-leave-active {
    transition: 0.5s ease;
  }

  .containerTranslate-enter-from, .containerTranslate-leave-to {
    transform: translateY(850px);
  }

  .containerTranslate-enter-from-to, .containerTranslate-leave {
    transform: translateY(0);
  }

  .welcome-text {
    display: block;
    margin: 96px auto 0;
  }

  .welcome-text2 {
    display: block;
    margin: 42px auto 0;
  }

  .welcome-text3 {
    display: block;
    margin: 78px auto 0;
  }

  .welcome-text4 {
    display: block;
    margin: 42px auto 0;
  }

  .main-title {
    width: 211px;
    display: block;
    margin: 96px auto 0;
  }

  .main-title2 {
    width: 444px;
    display: block;
    margin: 42px auto 0;
  }

  .main-text {
    width: 767px;
    display: block;
    margin: 78px auto 0;
  }

  .welcome-container-center, .about-container-center {
    position: absolute;
    top: 560px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
  }

  .last, .next {
    width: 320px;
    height: 80px;
    border-radius: 16px;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
    line-height: 80px;
  }

  .last {
    background-color: #f50359;
  }

  .next {
    background-color: #1b218b;
    margin-left: 40px;
  }

  .welcome-bg, .about-bg {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    background: #5555;
    animation: aboutBg 0.8s forwards ease;
  }

  @keyframes aboutBg {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>